<template>
  <Spin :spinning="Spinning" wrapperClassName="spanclass">
    <div class="container">
      <div class="TopBox">
        <ul class="FileUl">
          <li
            :class="RefFile === File.id ? 'ActiveFile' : ''"
            v-for="File in FileList"
            :key="File.id"
            @click="FileChange(File)"
          >
            {{ File.name }}
          </li>
        </ul>
      </div>
      <div class="BottomBox">
        <div class="LeftBottom">
          <ul>
            <li
              :class="index === RefBag ? 'ActiveBag' : ''"
              v-for="(item, index) in BagList"
              :key="index"
              @click="BagChange(item, index)"
            >
              <img class="FileImg" :src="ReturnBagType(item.dataType)" alt="" />
              <div class="FileMsg">
                <p class="TuPian">
                  {{
                    item.dataType === 'picture'
                      ? '图片'
                      : item.dataType === 'video'
                        ? '视频'
                        : item.dataType === 'audio'
                          ? '音频'
                          : ''
                  }}
                </p>
                <p style="font-size: 12px; margin-top: 5px">
                  文件数量：{{ item.size }}
                </p>
              </div>
            </li>
          </ul>
        </div>
        <div class="RightBottom">
          <ul v-if="InformationList.length">
            <li v-for="item in InformationList" :key="item.id">
              <div class="ProfileLeft">
                <img
                  class="ProfileTuPian"
                  :src="ReturnFileType(item.dataType)"
                  alt=""
                />
                <div class="ProfileMsg">
                  <p class="ProfileName">
                    {{ item.name ? item.name : '未知' }}
                  </p>
                  <p style="color: rgba(255, 255, 255, 0.6)">
                    <span style="margin-right: 20px">{{ item.date }}</span>
                    <span>{{ item.size }}</span>
                  </p>
                </div>
              </div>
              <div class="ProfileRight">
                <div class="DownloadBox">
                  <img
                    @click="DownLoadHandle(item)"
                    class="Download"
                    src="~@/assets/images/MultimediaData/download.png"
                    alt=""
                  />
                </div>
                <div class="delBox">
                  <img
                    @click="DelHandle(item)"
                    class="del"
                    src="~@/assets/images/MultimediaData/del.png"
                    alt=""
                  />
                </div>
              </div>
            </li>
          </ul>
          <div v-else class="flex flex-col items-center">
            <SvgIcon name="empty" class="w-14 h-14" />
            <span>暂无数据</span>
          </div>
        </div>
      </div>
    </div>
  </Spin>
</template>
<script setup lang="tsx">
import { onMounted, reactive, ref } from 'vue';
import audio1 from '@/assets/images/MultimediaData/audio1.png';
import audio2 from '@/assets/images/MultimediaData/audio2.png';
import bo2 from '@/assets/images/MultimediaData/bo2.png';
import chubo1 from '@/assets/images/MultimediaData/chubo1.png';
import shandian from '@/assets/images/MultimediaData/dian.png';
import img1 from '@/assets/images/MultimediaData/img1.png';
import img2 from '@/assets/images/MultimediaData/img2.png';
import lianbo1 from '@/assets/images/MultimediaData/lianbo1.png';
import rizhi from '@/assets/images/MultimediaData/rizhi.png';
import video1 from '@/assets/images/MultimediaData/video1.png';
import video2 from '@/assets/images/MultimediaData/video2.png';
import wenben from '@/assets/images/MultimediaData/wenben.png';
import { Modal, Spin, message } from 'ant-design-vue';
import SvgIcon from '@/components/SvgIcons/Index.vue';
import { Bigdownload } from '@/utils/bigdownload';
import { downloadDeviceFile, reqMultimediaDataAll } from '@/api/device';

const Spinning = ref(false);
const props = defineProps({
  pageData: {
    type: Object,
  },
});
console.log('props值', props.pageData);

// 输出文件夹类型
const ReturnBagType = (val: string) => {
  let img;
  switch (val) {
    case 'video':
      img = video1;
      break;
    case 'audio':
      img = audio1;
      break;
    case 'picture':
      img = img1;
      break;

    default:
      break;
  }
  return img;
};

// 输出文件类型
const ReturnFileType = (val: string) => {
  let img;
  switch (val) {
    case 'video':
      img = video2;
      break;
    case 'audio':
      img = audio2;
      break;
    case 'picture':
      img = img2;
      break;

    default:
      break;
  }
  return img;
};

let ParamsObj = {
  code: props.pageData?.code,
  fileType: '1',
  mediaType: '1',
  operationType: '1',
  url: 'root',
};

const RefFile = ref('1');
let CurrentFile = {} as any;
let BagUrl = '';
// 请求多媒体文件夹
const getMultimediaDataBag = async (data: any) => {
  Spinning.value = true;
  BagList.value = [] as any;
  InformationList.value = [] as any;
  const res = await reqMultimediaDataAll(data);
  if (res.code === 200) {
    Spinning.value = false;
    console.log('文件夹', res);
    BagList.value = res.data;
    if (BagList.value && BagList.value.length) {
      BagUrl = BagList.value[0].url;
      CurrentFile = BagList.value[0];
      await getMultimediaDataFile({
        code: props.pageData?.code,
        fileType: '2',
        mediaType: RefFile.value,
        operationType: '1',
        url: BagList.value[0].url,
      });
    }
  }
};

// 请求多媒体文件
const getMultimediaDataFile = async (data: any) => {
  InformationList.value = [] as any;
  const res = await reqMultimediaDataAll(data);
  if (res.code === 200) {
    console.log('文件', res);
    InformationList.value = res.data || [];
    InformationList.value.forEach((item: any) => {
      let arr = item.url.split('/');
      item.name = arr[arr.length - 1];
      item.dataType = CurrentFile.dataType;
    });
  }
};

onMounted(async () => {
  await getMultimediaDataBag(ParamsObj);
});

const FileList = ref([
  {
    name: '首页资料',
    id: '1',
  },
  {
    name: '预警音频',
    id: '2',
  },
  {
    name: '欢迎资料',
    id: '3',
  },
  {
    name: '科普资料',
    id: '4',
  },
  {
    name: '录屏视频',
    id: '5',
  },
]);

const BagList = ref([
  // {
  //     name: '图片',
  //     type: '1',
  //     classify: '文件夹',
  //     id: '1'
  // },
  // {
  //     name: '视频',
  //     type: '2',
  //     classify: '文件夹',
  //     id: '2'
  // },
] as any);

const InformationList = ref([
  // {
  //     id: '1',
  //     name: '202410123123.jpg',
  //     type: '1',
  //     capacity: '4.2MB',
  //     time: '2025-10-11 05:22:30'
  // },
] as any);

const FileChange = async (val: any) => {
  RefBag.value = 0;
  RefFile.value = val.id;
  ParamsObj.mediaType = val.id;
  await getMultimediaDataBag(ParamsObj);
};

const RefBag = ref(0);
const BagChange = async (val: any, index: any) => {
  CurrentFile = val;
  RefBag.value = index;
  BagUrl = val.url;
  await getMultimediaDataFile({
    code: props.pageData?.code,
    fileType: '2',
    mediaType: RefFile.value,
    operationType: '1',
    url: val.url,
  });
};

// 请求删除文件
const getMultimediaDataDel = async (data: any) => {
  const res = await reqMultimediaDataAll(data);
  if (res.code === 200) {
    message.success('操作成功');
    // await getMultimediaDataFile({
    //         code:props.pageData?.code,
    //         fileType: '2',
    //         mediaType: RefFile.value,
    //         operationType: '1',
    //         url: BagUrl
    //     })
    await getMultimediaDataBag(ParamsObj);
  }
};
// 请求下载文件
const getMultimediaDataLoad = async (data: any) => {
  const res = await reqMultimediaDataAll(data);
  if (res.code === 200) {
    //    console.log('res下载', res);
    const url = res.data || '';
    if (url) {
      await downDeviceFile(url);
    }
  }
};

const downDeviceFile = async (item: any) => {
  message.loading('文件下载中,请稍候...');
  const url = item;
  const code = props.pageData?.code;
  await downloadDeviceFile({ url, code });
  message.destroy();
};

// 下载
const DownLoadHandle = async (val: any) => {
  Bigdownload({
    code: props.pageData?.code,
    url: val.url,
  });
};

// 删除
const DelHandle = async (val: any) => {
  console.log('val', val);
  Modal.confirm({
    title: '系统提示',
    centered: true,
    content: `是否确认删除这条数据？`,
    onOk: async () => {
      const params = {
        code: props.pageData?.code,
        fileType: val.fileType,
        mediaType: RefFile.value,
        operationType: '2',
        url: val.url,
      };
      await getMultimediaDataDel(params);
    },
  });
};
</script>
<style lang="scss" scoped>
.spanclass {
  width: 100%;
  height: 100%;
  :deep(.ant-spin-container) {
    width: 100%;
    height: 100%;
    // border: 1px solid pink;
  }
}
.container {
  width: 100%;
  height: 100%;
  // border: 1px solid red;
  .TopBox {
    width: 100%;
    height: 35px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    .FileUl {
      // width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      // border: 1px solid red;
      .ActiveFile {
        border-bottom: 1px solid #2a3a40;
        background-color: transparent;
      }
      & > li:last-of-type {
        margin-right: 0;
      }
      li {
        cursor: pointer;
        width: 80px;
        height: 100%;
        // border-bottom: 1px solid rgba(255,255,255,0.3);
        display: flex;
        justify-content: center;
        align-items: center;
        // border: 1px solid pink;
        border: 1px solid rgba(255, 255, 255, 0.36);
        background-color: rgba(0, 0, 0, 0.4);
        transform: translateY(1px);
        margin-right: 10px;
        border-radius: 4px 4px 0 0;
      }
    }
  }
  .BottomBox {
    width: 100%;
    height: calc(100% - 40px);
    // border: 1px solid red;
    padding: 20px 0;
    display: flex;
    .LeftBottom {
      width: 20%;
      height: 100%;
      padding-right: 10px;
      // border: 1px solid yellow;
      overflow-y: auto;
      & > ul {
        width: 100%;
        .ActiveBag {
          background-color: rgba(255, 255, 255, 0.2);
          // color: #0081FF;
        }
        & > li {
          cursor: pointer;
          width: 100%;
          height: 70px;
          // border: 1px solid red;
          border-radius: 10px;
          // background-color: rgba(0,0,0,0.3);
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 10px;
          .FileImg {
            width: 45px;
            height: 45px;
            margin-left: 20px;
            margin-right: 20px;
            background-size: 100% 100%;
          }
          .FileMsg {
            // border: 1px solid red;
            // color: #0081FF;
            .TuPian {
              font-size: 16px;
            }
          }
        }
      }
    }
    .RightBottom {
      width: 80%;
      height: 100%;
      // margin-left: 1%;
      // border: 1px solid blue;
      border-left: 1px solid rgba(255, 255, 255, 0.3);
      padding-left: 20px;
      padding-right: 10px;
      overflow-y: auto;
      & > ul {
        width: 100%;
        & > li {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          // padding: 20px 0;
          padding-top: 10px;
          padding-bottom: 20px;
          .ProfileLeft {
            // border: 1px solid red;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .ProfileTuPian {
              width: 40px;
              height: 40px;
              margin-right: 20px;
            }
            .ProfileMsg {
              // border: 1px solid yellow;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              align-items: flex-start;
              .ProfileName {
                font-size: 18px;
              }
            }
          }
          .ProfileRight {
            display: flex;
            .DownloadBox {
              opacity: 0.6;
              width: 40px;
              height: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 15px;
              // background-color: rgba(0,0,0,0.3);
              border-radius: 10px;
              &:hover {
                opacity: 1;
              }
              .Download {
                cursor: pointer;
                width: 30px;
                height: 30px;
                // border: 1px solid red;
              }
            }
            .delBox {
              opacity: 0.6;
              width: 40px;
              height: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 15px;
              // background-color: rgba(0,0,0,0.3);
              border-radius: 10px;
              &:hover {
                opacity: 1;
              }
              .del {
                cursor: pointer;
                width: 30px;
                height: 30px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
